import { useContext, useEffect, useState } from 'react'
import './DialogBooks.scss'
import DialogBase from './DialogBase'
import { BbListContext } from './context/BbListContext'
import { jnSourceLists } from './constants/constants'
function DialogBooks() {
  const [bgJnItems, setBgJnItems] = useState([...jnSourceLists])
  const [showDialog, setShowDialog] = useState(true)
  const [bgMusicFlag, setBgMusicFlag] = useState(false)
  const [currentPackageJn, setCurrentPackageJn] = useState({})
  const { items, currentBb, learn, reset, add, clear,switchBb } = useContext(BbListContext)
  useEffect(() => {
    console.log(11, items)
    return () => {
      console.log('xiaohui')
    }
  }, [])

  const bgSelectEvent = (it) => {
    setCurrentPackageJn(it)
  }
  const playAudio = () => {
    var audio = document.getElementById('myAudio')
    audio
      .play()
      .then(() => {
        setTimeout(function () {
          audio.pause()
          audio.currentTime = 0 // 重置当前播放时间为0，如果需要重新播放可以从头开始
        }, 1000) // 1秒后停止播放
      })
      .catch((error) => {
        console.error('播放失败:', error)
      })
  }
  const musicEvent = () => {
    var CA = document.getElementById('CA')
    if (bgMusicFlag) {
      CA.pause()
    } else {
      CA.play()
    }
    setBgMusicFlag(!bgMusicFlag)
  }

  return (
    <>
      {showDialog && (
        <DialogBase
          title="梦幻打书我最行"
          onCloseClick={() => {
            setShowDialog(false)
          }}
        >
          <div class="dobooks-container">
            <audio id="myAudio" src="/click2.mp3"></audio>
            <audio id="CA" autoplay src="/CA.mp3"></audio>
            <div class="dobooks-left">
              <div class="dobooks-left-img">
                <img src="/BB/furong.png" alt="" />
              </div>
              <div class="dobooks-left-info">
                <div class="dobooks-left-info-txt">{currentBb?.des}</div>
                <div class="dobooks-left-info-btn" onClick={switchBb}>
                  切换
                </div>
              </div>
              {currentBb?.attrs && (
                <div class="dobooks-left-attrs">
                  <div class="dobooks-left-attrs-lib">
                    攻击资质：
                    {currentBb.attrs?.gongji}
                  </div>
                  <div class="dobooks-left-attrs-lib">法力资质： {currentBb.attrs?.fali}</div>
                  <div class="dobooks-left-attrs-lib">防御资质： {currentBb.attrs?.fangyu}</div>
                  <div class="dobooks-left-attrs-lib">速度资质： {currentBb.attrs?.sudu}</div>
                  <div class="dobooks-left-attrs-lib">体力资质： {currentBb.attrs?.tili}</div>
                  <div class="dobooks-left-attrs-lib">躲闪资质： {currentBb.attrs?.duoshan}</div>
                  <div class="dobooks-left-attrs-lib hot">寿 命： {currentBb.attrs?.shouming}</div>
                  <div class="dobooks-left-attrs-lib hot">成 长： {currentBb.attrs?.chengzhang}</div>
                  <div class="dobooks-left-attrs-lib hot">五 行： {currentBb.attrs?.wuxing}</div>
                </div>
              )}

              <div class="dobooks-left-jn">
                {currentBb?.jnList?.length > 0 &&
                  currentBb.jnList.map((e, i) => {
                    return (
                      <div class="dobooks-left-jn-lib" key={`jn_lib_${i}`}>
                        {e.img && <img src={e.img} alt="" />}
                      </div>
                    )
                  })}

                <div class="dobooks-left-jn-btn" onClick={reset}>
                  重置
                </div>
                <div class="dobooks-left-jn-btn">认证</div>
                <div class="dobooks-left-jn-btn">保存</div>
                <div class="dobooks-left-jn-btn _hot add" onClick={add}>
                  添加
                </div>
                <div class="dobooks-left-jn-btn _hot clear" onClick={clear}>
                  清除
                </div>
                <div class="dobooks-left-jn-btn _hot audio" onClick={musicEvent}>
                  {!bgMusicFlag ? '播放' : '暂停'}
                </div>
              </div>
            </div>
            <div class="dobooks-right">
              <div class="dobooks-right-learn">
                <div class="dobooks-right-learn-shoujue">
                  {currentPackageJn?.img && <img src={currentPackageJn.img} alt="" />}
                </div>
                <div class="dobooks-right-learn-btn">
                  <div class="dobooks-right-learn-btn-txt">请放入魔兽要诀或者高级魔兽要诀</div>
                  <div
                    class="dobooks-right-learn-btn-b"
                    onClick={() => {
                      learn(currentPackageJn)
                      playAudio()
                      setCurrentPackageJn({})
                    }}
                  >
                    学习
                  </div>
                </div>
              </div>
              <div class="dobooks-right-bags">
                {bgJnItems.map((e, index) => {
                  return (
                    <div
                      class="dobooks-right-bags-lib"
                      key={`jn_${index}`}
                      onClick={() => {
                        bgSelectEvent(e)
                      }}
                    >
                      <img src="/shoujue.jpg" alt="" />
                      <div class="dobooks-right-bags-lib-des">{e.des}</div>
                    </div>
                  )
                })}
              </div>
              <div class="dobooks-right-des">
                说明 <br />
                隨兽要诀能赋予召唤兽某种技能，但是每次使 内 丹
                用的同时会消除该召唤兽的一项原有技能，技能数量≤2的召唤兽有一定几率不会 有 技能。
              </div>
            </div>
          </div>
        </DialogBase>
      )}
    </>
  )
}

export default DialogBooks
